<template>
  <div>
    <!-- 
        default-expanded-keys 默认展开节点 
        expand-on-click-node false为点击节点可以展开,true 要点击展开箭头
        @node-drop 拖拽成功的回调事件  “v-on”指令的简写是“@”
        
        ref="menuTree"  作用,调用组件提供的方法
        this.$refs 得到所有组件
        this.$refs.menuTree 得到树的组件
        this.$refs.menuTree.getCheckedNodes  调用树组件的获取选中节点的方法
    -->

    <div class="input-button-container mt10">
      <el-input
        class="in-center"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>

      <el-button class="ml10" type="primary" @click="clearFilter" icon="el-icon-refresh"></el-button>
    </div>

    <div class="input-button-container mt10">
      <el-input
        class="in-center"
        placeholder="未选中数据"
        v-model="selNode"
        :disabled="true">
      </el-input>

      <el-button class="ml10" type="danger" @click="clearSel" icon="el-icon-delete"></el-button>
    </div>

    <el-tree :data="menus" 
        node-key="catId"  
        :props="defaultProps"  
        :expand-on-click-node="false"  
        :filter-node-method="filterNode"
        @node-click="nodeClicek"
        class="mt10"
        ref="typeTree">
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      draggable:false, //是否允许拖拽,true 
      menus: [],  //树内容
      expandedKey: [164], //默认展开的节点
      selNode:"",
      filterText:"",
      defaultProps: {
        children: 'children', //配置子树是对象的那个属性
        label: 'recordTypeName'  //对应树结构中的名字, 配置显示字段
      }
    };
  },
  components: {
  },
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl('/product/word/recordtype/tree'),
        method: 'get',
      }).then(({ data }) => {
        //{data} 把数据中的data解构出来
        this.menus = data.data;
      })
    },
    //节点所对应的对象、节点对应的 Node、节点组件本身。
    //树节点点击事件
    nodeClicek(data,node,component){
      this.selNode = data.recordTypeName;
      this.$emit("type-tree-click",data,node); //向父节点通讯
    },
    //过滤节点
    filterNode(value, data) {
      if (!value) return true;
      return data.recordTypeName.indexOf(value) !== -1;
    },
    //clearRefresh
    clearFilter(){
      this.filterText = "";
    },    
    //clearRefresh
    clearSel(){
      this.selNode = "";
      this.$emit("clear-select"); //向父节点通讯
    }
  },
  //生命周期函数 在实例创建完成后被立即同步调用。 
  created() {
    this.getMenus();
  },
  watch: {
    filterText(val) {
      this.$refs.typeTree.filter(val);
    }
  }
}
</script>

<style>
.input-button-container{
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  
}

.mt10{
  margin-top: 10px;
}

.ml10{
  margin-left: 10px;
}

.in-center .el-input__inner{
  text-align: center;
}

</style>